<template>
  <el-card class="attrList-card">
    <el-button
      type="primary"
      :icon="Plus"
      :disabled="!categoryStore.categoty3Id"
      @click="showSaveAttr"
      >添加属性</el-button
    >
    <el-table
      :data="attrList"
      border
      style="width: 100%"
      class="attrList-table"
    >
      <el-table-column label="序号" type="index" width="60" />
      <el-table-column prop="attrName" label="SPU名称" width="180" />
      <el-table-column label="SPU描述">
        <template v-slot="{ row }">
          <el-tag
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            type="success"
            class="attr-tag"
            >{{ attrValue.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template v-slot="{ row }">
          <el-tooltip content="修改" placement="top">
            <el-button
              type="warning"
              :icon="Edit"
              size="small"
              @click="showUpdateAttr(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top"
            ><el-button
              type="danger"
              :icon="Delete"
              size="small"
              @click="reoveAttr(row.id)"
            ></el-button
          ></el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AttrList",
};
</script>

<script lang="ts" setup>
import { Edit, Plus, Delete } from "@element-plus/icons-vue";
import { userCategoryStore } from "@/stores/category";
import { watch, ref, onBeforeMount } from "vue";
import { getAttrInfoListApi, delAttrListApi } from "@/api/product/attrs";
import type { AttrsList, SaveAttrItem } from "@/api/product/modles/attrsModel";
import { ElMessage } from 'element-plus';
const categoryStore = userCategoryStore();

const attrList = ref<AttrsList>([]);
// 显示那个组件
const emit = defineEmits(["setIsShowAttrList", "setAttr"]);

const getAttrList = async () => {
  const { categoty1Id, categoty2Id, categoty3Id } = categoryStore;

  attrList.value = await getAttrInfoListApi({
    category1Id: categoty1Id as number,
    category2Id: categoty2Id as number,
    categoty3Id: categoty3Id as number,
  });
};

// 监视pinia 数据中的3级id  ,有 三级路由id就渲染 没有就不渲染
watch(
  categoryStore,
  (valStore) => {
    if (valStore.categoty3Id) {
      getAttrList();
      // console.log(attrList.value);
      return;
    }
    attrList.value = [];
  },
  {
    immediate: true,
  }
);

// 显示更新组件  //点击修改
const showUpdateAttr = (row: SaveAttrItem) => {
  emit("setIsShowAttrList", false);
  emit("setAttr", row);
};

// 显示添加组件 //添加属性，1切换，并清空数据
const showSaveAttr = () => {
  emit("setIsShowAttrList", false);
  emit("setAttr", {
    attrName: "",
    attrValueList: [],
  });
};
// 删除属性
const reoveAttr = async (id: number) => {

  await delAttrListApi(id);
  ElMessage.success("删除成功！")
  getAttrList();
};

</script>

<style scoped>
.attrList-card {
  margin-top: 20px;
}

.attrList-table {
  margin: 10px 0;
}
.attr-tag {
  margin-right: 10px;
}
</style>